<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" bgColor="#fff" autoBack="true">
            <view slot="center" class="xilu_center_slot flex-box">
                <image @click="bindHome()" :src="forum.user?forum.user.avatar:''" mode="aspectFill"></image>
                <view class="fs32 blue m-ellipsis pl20">{{forum.user?forum.user.nickname:''}}</view>
                <view class="btn1" @click="toggleFocus()" v-if="!forum.is_focus_count">+ 关注</view>
                <view class="btn3" @click="toggleFocus()" v-else>已关注</view>
            </view>
        </u-navbar>
        <view class="page-foot bg-white">
            <view class="flex-box fs24 col5 plr30 ">
                <input type="text" class="input flex-grow-1" confirm-type="send" @confirm="addComment" @blur="blur" :focus="focusStatus" :placeholder="replayText?replayText:'说点什么～'" placeholder-class="cola" v-model="content" />
                <view class="pl30 tc" @click="togglesCollect()">
                    <image v-if="forum.is_collection_count>0" src="../../static/icon/find_like-on.png" class="xilu_like" mode="aspectFill"></image>
                    <image v-else src="../../static/icon/find_like.png" class="xilu_like" mode="aspectFill"></image>
                    <view>{{forum.collection_count}}</view>
                </view>
                <view class="pl40 tc">
                    <image src="../../static/icon/find_comment.png" class="xilu_like" mode="aspectFill"></image>
                    <view>{{forum.comment_count}}</view>
                </view>
                <view class="pl40 tc" @click="togglesRec()">
                    <image v-if="forum.is_fav_count>0" src="../../static/icon/find_zan-on.png" class="xilu_like" mode="aspectFill"></image>
                    <image v-else src="../../static/icon/find_zan.png" class="xilu_like" mode="aspectFill"></image>
                    <view>{{forum.fav_count}}</view>
                </view>
            </view>
        </view>
        <view class="container pt30 plr30 flex-box flex-col flex-align-start">
            <view>{{forum.content}}</view>
            <view class="flex-box flex-wrap w100">
                <image :src="item" mode="aspectFill" class="xilu_pic" v-for="(item,index) in forum.images_text" @click="previewImg(index)"></image>
            </view>
            <view class="fs24 col89 ptb30 border_bottom w100">{{forum.createtime_text}}发布</view>
            <view class="fs30 col10 pt30 w100">共{{forum.comment_count}}条评论</view>
            <view class="flex-grow-1 w100">
                <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
                    <view class="xilu_leave_word" v-for="(item,index) in forumComments" :key="index">
                        <view class="flex-box flex-align-start ptb30">
                            <image class="xilu_avatar mr30" :src="item.user.avatar" mode="aspectFill"></image>
                            <view class="flex-grow-1">
                                <view class="flex-box flex-between pb10">
                                    <view class="fs30 blue">{{item.user.nickname}}</view>
                                    <view class="fs24 col89">{{item.createtime_text}}</view>
                                </view>
                                <view class="fs30 col10" @click="bindApply(index)">{{item.content}}</view>
                            </view>
                        </view>
                        <view class="xilu_reply flex-box ptb30 mb30 flex-align-start" v-if="!item.childCommentsMore.nothing" v-for="(item2,index2) in item.childComments">
                            <image class="xilu_avatar mr15" :src="item2.user.avatar" mode="aspectFill"></image>
                            <view class="flex-grow-1">
                                <view class="flex-box flex-between pb10">
                                    <view class="fs30 blue">{{item2.user.nickname}}</view>
                                    <view class="fs24 col89">{{item2.createtime_text}}</view>
                                </view>
                                <view class="fs30 col10">{{item2.content}}</view>
                            </view>
                        </view>
                        <view class="flex-box flex-center ptb30" v-if="item.childlist_count>0">
                            <view class="m-arrow-down" @click="fetchSecondComments(index)" v-if="item.childCommentsMore.page==1"><text class="pr10">展开{{item.childlist_count}}评论</text></view>
                            <view class="m-arrow-down" @click="fetchSecondComments(index)" v-else-if="item.childCommentsMore.page>1 && !item.childCommentsMore.nomore"><text class="pr10">加载更多</text></view>
                            <view class="m-arrow-up ml30" v-if="item.childCommentsMore.page>1" @click="bindRetract(index)"><text class="pr10">收起</text></view>
                        </view>
                    </view>
                </mescroll-uni>
            </view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                forumId: 0,
                forum: {
                    createtime_text: '',
                    comment_count: 0
                },
                downOption: {
                    autoShowLoading: true, // 显示下拉刷新的进度条
                    textColor: "#aaa" // 下拉刷新的文本颜色
                },
                pageNum: 1, // 页码
                pageSize: 10, // 页长
                forumComments: [],
                focusStatus: false,
                content: '',
                firstIndex: -1, //对某个评论INDEX
                secondIndex: -1, //对某个评论INDEX,
                replayText: "",
            };
        },
        onLoad(options) {
            this.forumId = options.id;
            this.fetchDetail();

        },
        methods: {
            fetchDetail() {
                this.$core.get({
                    url: 'xilumarket.forum/detail',
                    data: {
                        forum_id: this.forumId
                    },
                    success: ret => {
                        this.forum = ret.data
                    },
                    fail: err => {
                        console.log(err);
                    }
                });
            },
            //重新加载
            reloadList() {
                this.mescroll.resetUpScroll();
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                this.$core.get({
                    url: 'xilumarket.forum_comment/lists',
                    data: {
                        forum_id: this.forumId,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)

                        //设置列表数据
                        if (page.num == 1) this.forumComments = []; //如果是第一页需手动置空列表
                        this.forumComments = this.forumComments.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);

                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
            //二级评论
            fetchSecondComments(firstIndex) {
                this.$util.fetch2(this, 'xilumarket.forum_comment/second_lists', {
                    forum_id: this.forumId,
                    forum_comment_id: this.forumComments[firstIndex].id,
                    pagesize: 10
                }, "childCommentsMore", "childComments", 'forumComments', firstIndex, 'data', data => {

                })
            },
            //收起
            bindRetract(firstIndex) {
                this.forumComments[firstIndex].childComments = [];
                this.forumComments[firstIndex].childCommentsMore = {
                    page: 1
                };
            },

            addComment() {
                let firstIndex = this.firstIndex;
                let secondIndex = this.secondIndex;
                let pid = 0;
                if (firstIndex >= 0 && secondIndex >= 0) {
                    pid = this.forumComments[firstIndex].childComments[secondIndex].id;
                } else if (firstIndex >= 0) {
                    pid = this.forumComments[firstIndex].id;
                }
                if (!this.content.trim()) {
                    uni.showToast({
                        title: "请填写评论内容",
                        icon: 'none'
                    })
                    return ''
                }
                this.$core.post({
                    url: 'xilumarket.forum_comment/add_comment',
                    data: {
                        forum_id: this.forum.id,
                        pid: pid,
                        content: this.content
                    },
                    success: ret => {
                        uni.showToast({
                            title: "点评成功",
                            icon: 'none'
                        });
                        this.reloadList();
						this.blur();
                    },
                    fail: err => {
                        console.log(err);
                    }
                });
            },
            //回复评论
            bindApply(index) {
                this.firstIndex = index;
                this.replayText = "回复 @" + this.forumComments[index].user.nickname
                this.focusStatus = true;
            },

            //评论失焦
            blur() {
                this.firstIndex = -1;
                this.secondIndex = -1;
                this.content = '';
                this.replayText = '';
                this.focusStatus = false;
            },
            toggleFocus() {
                this.$core.post({
                    url: 'xilumarket.forum/toggle_focus',
                    data: {
                        user_id: this.forum.user_id
                    },
                    success: ret => {
                        this.forum.is_focus_count = ret.data.is_focus_count;
                        //this.$forceUpdate();
                    },
                    fail: err => {
                        console.log(err);
                    }
                });
            },
            // 点击收藏
            togglesCollect() {
                this.$core.post({
                    url: 'xilumarket.forum/toggle_collection',
                    data: {
                        forum_id: this.forum.id
                    },
                    success: ret => {
                        this.forum = ret.data;
                        this.$forceUpdate();
                    },
                    fail: err => {}
                });
            },
            // 点击点赞
            togglesRec() {
                this.$core.post({
                    url: 'xilumarket.forum/toggle_fav',
                    data: {
                        forum_id: this.forum.id
                    },
                    success: ret => {
                        this.forum = ret.data;
                        this.$forceUpdate();
                    },
                    fail: err => {}
                });

            },
            previewImg(index) {
                let that = this;
                uni.previewImage({
                    current: index,
                    urls: that.forum.images_text,
                    fail() {
                        uni.showToast({
                            title: "网络错误，请重试"
                        })
                    }
                })
            },
			//主页
			bindHome(){
				uni.navigateTo({
					url: '/pages/home_page/home_page?id='+this.forum.user_id+'&tab=forum'
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: calc(100vh - 44px - var(--status-bar-height) - 40rpx);
        min-height: auto;
    }

    .xilu {
        &_center_slot {
            width: 750rpx;
            padding-left: 85rpx;

            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
            }

            .m-ellipsis {
                width: 270rpx;
            }

            .btn1 {
                width: 110rpx;
                height: 56rpx;
                line-height: 56rpx;
                font-size: 24rpx;
            }
        }

        &_pic {
            width: 215rpx;
            height: 215rpx;
            border-radius: 20rpx;
            margin-right: 22rpx;
            margin-top: 25rpx;

            &:nth-of-type(3n) {
                margin-right: 0;
            }
        }

        .border_bottom {
            border-bottom: 1px solid #eee;
        }

        &_avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
        }

        &_leave_word {
            border-bottom: 1px solid #eee;
        }

        &_reply {
            padding: 30rpx;
            background: #F7F9FC;
            border-radius: 15rpx;
        }

        &_like {
            width: 45rpx;
            height: 45rpx;
        }

        .page-foot {
            .flex-box {
                height: 100rpx;
            }

            .input {
                width: 456rpx;
                height: 75rpx;
                line-height: 75rpx;
                background: #F7F9FC;
                border-radius: 40rpx;
                padding: 0 30rpx;
            }
        }

        .w100 {
            width: 100%;
        }
    }
</style>